<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>餐厅房间预订</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    background-image: url("./photo/背景.png");
    background-size: cover;  
  }
  .container {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  h1 {
    text-align: center;
  }
  form {
    margin-top: 20px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #4cae4c;
  }
 .wz{
  position: absolute;
  top: 10px;
  left: 100px;
 }


</style>
</head>
<body>
<div class="container">
  <h1>餐厅房间预订</h1>
  <form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>

    <label for="phone">联系电话:</label>
    <input type="text" id="phone" name="phone" required>

    <label for="date">日期:</label>
    <input type="date" id="date" name="date" required>

    <label for="time">时间:</label>
    <input type="time" id="time" name="time" required>

    <label for="guests">用餐人数:</label>
    <input type="number" id="guests" name="guests" min="1" required>

    <label for="room-style">房间样式:</label>
    <select id="room-style" name="room-style" required>
      <option value="standard">标准间</option>
      <option value="deluxe">豪华间</option>
      <option value="suite">套间</option>
      <option value="suite">VIP间</option>
    </select>

    <a href="./5餐厅主页面 重做版.html"><button type="submit">提交预订</button></a>
    
  </form>
</div>
<a href="./5餐厅主页面 重做版.html"><img class="wz" src="./photo/小房子.png" alt=""></a>
</body>
</html>
